<template>
  <a-modal v-model:visible='visible' width='600px' @ok='handleSubmit'>
    <a-form :form='form' :model='formModel' :rules='ruleValidate' label-width='120px'>
      <a-row>
        <a-col :span='22'>
          <a-form-item label='字段名称'>
            <a-input v-decorator="['fieldName',{ rules: [{ required: true, message: '请输入字段名称' }] }]" v-model='formModel.fieldName'></a-input>
          </a-form-item>
          <a-form-item label='字段编码'>
            <a-input  v-model='formModel.fieldCode'></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
export default {
  name: "FieldForm",
  props: {},
  data() {
    return {
      regionData: [],
      form: this.$form.createForm(this),
      isAdd: false,
      visible: false,
      callback: null,
      value: "",
      formModel: {
        fieldCode: "",
        actionName: "",
        menuId: ""
      },

      ruleValidate: {
        actionCode: [
          {
            required: true,
            message: "请填写字段编码",
            trigger: "blur"
          }
        ],
        fieldName: [
          {
            required: true,
            message: "请填写字段名称",
            trigger: "blur"
          }
        ]
      }
    }
  },
  methods: {
    open() {
      this.$nextTick(() => {
        this.visible = true
      })
    },
    /**
     * 表单提交
     */
    handleSubmit(callback) {
      let me = this
      this.form.validateFields((valid, values) => {
        if (!valid) {
          this.http.post(this,
            {
              url: this.api.field.add,
              data: this.formModel,
              success: (me) => {
                this.visible = false
                this.$emit("success")
              }
            }
          )
        }
      })
    }
  }
}
</script>
<style scoped>

::v-deep .el-dialog__header {
  background: #f5f5f6;
  border-radius: 5px;
}

::v-deep .el-dialog__body {
  margin-top: -10px;
}

::v-deep .el-dialog {
  border-radius: 5px;
}
</style>
